<template>
  <div class="person">
    <div>姓名：{{ person.name }}</div>
    <div>年龄：{{ person.age }}</div>
    <div>check：{{ person.check }}</div>
    <div>姓名解构：{{ name }}</div>
    <div>年龄解构：{{ age }}</div>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="lianzuo">改name其实修改person中name</button>
    <button
      @click="lianzuo2"
      :style="{ color: check ? 'red' : 'green' }"
    >sssss</button>
  </div>
</template>

<script setup lang="ts" name="PersonComponent">
import { reactive, toRefs, toRef } from 'vue';
let person = reactive({ name: '奔驰1', age: 101, check: true });

const changeName = () => {
  person.name += 1;
  console.log(name, age);
};

const changeAge = () => {
  person.age += 1;
};
// 响应式的对象解构出来不是响应式
// let { name, age } = person;
// 响应式的对象torefs后每一个都是响应式，再进行解构
let { name, age } = toRefs(person);
let x = toRefs(person);
console.log(x); // { name: RefImpl, age: RefImpl }
const lianzuo = () => {
  // 副作用修改name其实就是修改person的name
  age.value += 2;
};
let check = toRef(person, 'check');

const lianzuo2 = () => {
  check.value = false;
};
</script>

<style scoped>
.person {
  color: red;
}
ul li {
  font-size: 20px;
}
</style>
